.home {
    .logo {
        height: 30vh;
        margin: 0 auto;
        padding-top: 5vh;
        text-align: center;
        img {
            height: 100%;
        }
    }
    main {
        width: 500px;
        margin: 50px auto 0;
        ul {
            // display: flex;
            height: 200px;
            margin: 50px 0;
            // align-items: flex-start;
            // justify-content: space-between;
            flex-wrap: wrap;
            li {
                position: relative;
                display: inline-block;
                vertical-align: top;
                width: 50px;
                margin-right: calc((100% - 5 * 50px) / 4);
                margin-bottom: 20px;
                text-align: center;
                &:nth-of-type(5n) {
                    margin-right: 0;
                }
                &:hover .close {
                    display: inline-block;
                }
                &.add {
                    a {
                        line-height: 50px;
                    }
                }
                a {
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    background: #ccc;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        height: 100%;
                    }
                }
                .close {
                    position: absolute;
                    display: none;
                    width: 10px;
                    height: 10px;
                    background: #eee;
                    line-height: 6px;
                    font-size: 14;
                    top: -7px;
                    right: -3px;
                    border-radius: 50%;
                    cursor: pointer;
                }
            }
        }
    }
}
